<template>
  <div class="app-container">
    <div class="head">
      <img src="@/assets/img/Layout/position.png" />
      <p class="see-block">采购退货报表</p>
    </div>
    <div class="view-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="按起止时间" prop="time">
          <el-date-picker
              v-model="time"
              type="daterange"
              range-separator="至"
              style="width: 230px;"
              @change="dataTime()"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="类型" prop="type" >
          <el-select
            v-model="queryParams.type"
            placeholder=""
            clearable
            size="small"
            style="width:100px;"
          >
            <el-option label="金额" value="1"></el-option>
            <el-option label="数量" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分析内容" prop="analysisContent" >
          <el-select
            v-model="queryParams.analysisContent"
            placeholder=""
            clearable
            size="small"
            style="width:100px;"
          >
            <el-option label="供应商" value="1"></el-option>
            <el-option label="货品" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="显示前" prop="limit" >
          <el-select
            v-model="queryParams.limit"
            placeholder=""
            size="small"
            style="width:100px;"
          >
            <el-option
              v-for="item in 10"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
          名
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" class="list-search btn-success" color="#5ED4D4">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" class="list-search">重置</el-button>
        </el-form-item>
      </el-form>
      <template>
        <el-row :gutter="20" class="mb30">
          <el-col :span="6" :offset="9">
            <ul class="scan">
              <li v-for="(item, index) in graphType" :key="index" @click="onGraphType(index)" :class="{'active' : index == current }">{{ item }}</li>
            </ul>
          </el-col>
        </el-row>
        <template v-if="isData == true">
          <div id="barChart" :style="barStyle" v-show="current == 0"></div>
          <div id="pieChart" :style="pieStyle" v-show="current == 1"></div>
        </template>
        <template v-else>
          暂无数据！
        </template>
      </template>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts"
import { purchaseReturnReportList } from "@/api/system/report/report"
export default {
  name: "order",
  data() {
    return {
      queryParams: {
        startDate: undefined,
        endDate: undefined,
        analysisContent: '1',
        type: '1',
        limit: 10,
      },
      time: [],
      isData: true,
      graphType: ['柱状图', '饼状图'],
      current: 0,
      isGraph: true,
      // 柱状数据
      xData: [], // 横坐标
      yData: [], // 显示数据
      // 饼状数据
      pieData: [],
      barStyle: { width: "100%", height: "500px" },
      pieStyle: { width: "100%", height: "700px" },
      title: '',
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表
    getList() {
      this.title = this.queryParams.type == 1 ? '金额(元)' : '数量'
      purchaseReturnReportList(this.queryParams).then(res => {
        if(res.rows.length > 0){
          this.isData = true
          if(this.queryParams.analysisContent == '1'){
            this.xData = res.rows.map(i => i.supplierName)
            if(this.queryParams.type == '1'){
              this.yData = res.rows.map(i => i.prepaidAmount)
              this.pieData = res.rows.map(i => {
                return Object.assign({},{'name': i.supplierName, 'value': i.prepaidAmount})
              })
            }else{
              this.yData = res.rows.map(i => i.outStore)
              this.pieData = res.rows.map(i => {
                return Object.assign({},{'name': i.supplierName, 'value': i.outStore})
              })
            }
          }else{
            this.xData = res.rows.map(i => i.productName)
            if(this.queryParams.type == '1'){
              this.yData = res.rows.map(i => i.prepaidAmount)
              this.pieData = res.rows.map(i => {
                return Object.assign({},{'name': i.productName, 'value': i.prepaidAmount})
              })
            }else{
              this.yData = res.rows.map(i => i.outStore)
              this.pieData = res.rows.map(i => {
                return Object.assign({},{'name': i.productName, 'value': i.outStore})
              })
            }
          }
          if(this.current == 0){
            this.$nextTick(()=>{
              this.getBarChartData()
            })
          }else{
            this.$nextTick(()=>{
              this.getPieChartData()
            })
          }
        }else{
          this.isData = false
        }
      })
    },
    // 搜索按钮
    handleQuery() {
      this.getList()
    },
    // 重置按钮
    resetQuery() {
      this.resetForm("queryForm")
      this.time = ''
      this.queryParams.startDate = undefined
      this.queryParams.endDate = undefined
      this.handleQuery()
    },
    // 时间选择器
    dataTime(){
      if(this.time){
        let day = 24 * 60 * 60 * 1000
        this.queryParams.startTime = this.parseTime(this.time[0])
        this.queryParams.endTime = this.parseTime(this.time[1].getTime() + day)
      }else if(this.time == null){
        this.queryParams.startDate = undefined
        this.queryParams.endDate = undefined
      }
    },
    onGraphType(index){
      this.current = index
      this.getList()
    },
    // 柱状图
    getBarChartData(){
      const barData = {
        title: {
          text: this.title,
          left: 'center'
        },
        xAxis: {
          data: this.xData,
          type: 'category',
          axisLabel: {  
            interval:0,  
          },
        },
        yAxis: {},
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.yData,
            label: {
              // 柱状图上方文本标签，默认展示数值信息
              show: true,
              position: "top"
            },
            itemStyle: {
              color: '#28C6C6',
            }
          },
        ],
        barWidth: 30,
      }
      const barChart = echarts.init(document.getElementById("barChart"))
      barChart.off('click')
      barChart.setOption(barData)
      barChart.on('click', params => {
        if(this.queryParams.analysisContent == '1'){
          this.$router.push({
            path:"/chart/purchaseReturnDetail",
            query:{
              supplierName: params.name,
              startDate: this.queryParams.startDate,
              endDate: this.queryParams.endDate
            }
          })
        }else{
          this.$router.push({
            path:"/chart/purchaseReturnDetail",
            query:{
              productName: params.name,
              startDate: this.queryParams.startDate,
              endDate: this.queryParams.endDate
            }
          })
        }
      })
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        barChart.resize()
      })
    },
    // 饼状图
    getPieChartData(){
      const pieData = {
        title: {
          text: this.title,
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: "pie", //形状为饼状图
            radius: '50%',
            data: this.pieData,
            label: {
              formatter: ' {b|{b}：}{c} ',
              rich: {
                b: {
                  color: '#4C5058',
                  fontSize: 13,
                  fontWeight: 'bold',
                  lineHeight: 40
                },
              }
            },
          },
        ]
      }
      const pieChart = echarts.init(document.getElementById("pieChart"))
      pieChart.off('click')
      pieChart.setOption(pieData)
      pieChart.on('click', params => {
        // console.log(params)
        if(this.queryParams.analysisContent == '1'){
          this.$router.push({
            path:"/chart/purchaseReturnDetail",
            query:{
              supplierName: params.name,
              startDate: this.queryParams.startDate,
              endDate: this.queryParams.endDate
            }
          })
        }else{
          this.$router.push({
            path:"/chart/purchaseReturnDetail",
            query:{
              productName: params.name,
              startDate: this.queryParams.startDate,
              endDate: this.queryParams.endDate
            }
          })
        }
      })
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        pieChart.resize()
      })
    }
  }
}
</script>